<template>
  <div class="jfhllbox" :style="{minHeight:llqheight+'px'}">
    <head-nav></head-nav>
    <div class="zanwei-top"></div>
    <div class="jfhll-content">
      <div class="llcjtext">
        <div class="ll">
          <span>{{ll}}</span>
        </div>
        <div class="ts">
          移动/联通/电信都可以充值
        </div>
        <div class="sjh">
          <input class="input" v-model="phone" placeholder="请输入要充值的手机号码" type="number">
        </div>
      </div>
      <div class="llbtn" id="llbtn" @click="chongzhifn" v-if="islq == ''">
        <img src="../../assets/img/ljcz.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/api";
import { MessageBox, Toast, Popup } from "mint-ui";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      llqheight: document.documentElement.clientHeight,
      phone: "",
      oid: "",
      ll: "",
      zjuser: "",
      islq: ''
    };
  },
  mounted() {
    debugger
    let query = this.$route.query;
    this.oid = query.oid;
    this.ll = query.ll;
    this.phone = query.phone;
    this.zjuser = query.zjuser;
    this.islq = query.islq;
    if (query.ll) {
    	document.title = query.ll;
    	this.$store.state.title = query.ll;
    }
  },
  methods: {
    chongzhifn() {
      let page = this;
      if (this.phone == "") {
        this.Toastfn("手机号码不能为空", 2000);
      } else if (this.phone.length != 11) {
        this.Toastfn("请输入正确的手机号码", 2000);
      } else {
        MessageBox.confirm(this.phone, "请核实要充值的手机号码").then(
          action => {
            if (action === "confirm") {
              // var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
              console.log("确认");
              let oid = this.oid;
              let phone = this.phone;
              if (page.zjuser) {
              	api.createPrizes(this, oid, phone, page.zjuser, res => {
	                let data = res.data;
	                console.log("流量充值");
	                console.log(data);
	                if (data.code == 0) {
	                  MessageBox.confirm(
	                    "已为您充值" + data.data.llczl + "M，请您耐心等待！",
	                    "提示"
	                  ).then(action => {
	                    page.$router.push({
	                      path: "/wallet",
	                    });
	                  }).catch(err => {
	                  	page.$router.push({
	                      path: "/wallet",
	                    });
	                  });
	                } else {
	                  this.Toastfn(data.msg, 2000);
	                }
	              });
              } else {
              	api.recharge(this, oid, phone, res => {
	                let data = res.data;
	                console.log("流量充值");
	                console.log(data);
	                if (data.code == 0) {
	                  MessageBox.confirm(
	                    "已为您充值" + data.data + "M，请您耐心等待！",
	                    "提示"
	                  ).then(action => {
	                    page.$router.push({
	                      path: "/wallet",
	                    });
	                  });
	                } else {
	                  this.Toastfn(data.msg, 2000);
	                }
	              });
              }
            }
          }
        );
      }
    },
    // 提示函数
    Toastfn(message, duration, position) {
      Toast({
        message: message,
        duration: duration,
        position: position
      });
    }
  }
};
</script>

<style lang="less" scoped>
.jfhllbox {
  background-image: url("../../assets/img/llbg1.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: 48px;
  height: 100%;
  .jfhll-content {
    .llcjtext {
      margin-top: 72%;
      padding: 10px;
      font-size: 0.42rem;
      height: 3.7rem;
      .ll {
        padding-top: 0.36rem;
        text-align: center;
        span {
          font-size: 0.62rem;
          color: #f16f57;
          font-weight: bold;
        }
      }
      .ts {
        padding-top: 0.12rem;
        text-align: center;
        font-size: 0.36rem;
        font-weight: bold;
      }
      .sjh {
        margin: 0.36rem auto 0 auto;
        width: 80%;
        background-color: #fff;
        border-radius: 0.5rem;
        border: 1px solid #8fcd68;
        height: 0.74rem;
        text-align: center;
        .input {
          padding: 0;
          margin: 0;
          border: 0;
          line-height: 0.7rem;
          font-size: 0.42rem;
          text-align: center;
          border-radius: 0.5rem;
          color: #f16f57;
          font-weight: bold;
          width: 100%;
        }
        .input::placeholder {
          color: #f16f57;
          font-weight: normal;
          font-size: 0.32rem;
        }
      }
    }
    .llbtn {
      text-align: center;
      width: 50%;
      margin: 5px auto;
    }
    .llbtn img {
      width: 100%;
      background-color: transparent;
    }
  }
}
</style>


